<template>
  <div
    class="jackpot"
    :class="{
      'jackpot-end':
        lotteryStore.activityCurStatus == 3 ||
        lotteryStore.activityCurStatus == 5,
    }"
  >
    <!-- 主图 -->
    <img
      v-if="lotteryStore.activityCurStatus <= 2 && !lotteryStore.isFri"
      class="jackpot-main"
      src="/image/lottery-v3/jackpot-main1-icon.png"
    />
    <img
      v-else-if="lotteryStore.activityCurStatus <= 2 && lotteryStore.isFri"
      class="jackpot-main"
      :class="{
        'jackpot-main-fri': lotteryStore.isFri,
      }"
      src="/image/lottery-v3/jackpot-main4-icon.png"
    />
    <img
      v-else-if="
        (lotteryStore.activityCurStatus == 3 ||
          lotteryStore.activityCurStatus == 5) &&
        !lotteryStore.isFri
      "
      class="jackpot-main"
      src="/image/lottery-v3/jackpot-main2-icon.png"
    />
    <img
      v-else-if="
        (lotteryStore.activityCurStatus == 3 ||
          lotteryStore.activityCurStatus == 5) &&
        lotteryStore.isFri
      "
      class="jackpot-main"
      :class="{
        'jackpot-main-fri-end': lotteryStore.isFri,
      }"
      src="/image/lottery-v3/jackpot-main3-icon.png"
    />
    <!-- 标题: GTM+7 周日:超级大赢家 其他:幸运大赢家 -->
    <div
      class="jackpot-titleView items-center"
      :class="{
        'jackpot-titleView-fri': lotteryStore.isFri,
      }"
    >
      <img
        v-if="!lotteryStore.isFri"
        class="jackpot-titleView-left"
        src="/image/lottery-v3/jackpot-title-icon.svg"
      />
      <img
        v-else
        class="jackpot-titleView-left"
        src="/image/lottery-v3/jackpot-titlefri-icon.svg"
      />
      <div
        class="jackpot-titleView-text"
        :class="{
          'jackpot-titleView-text-fri': lotteryStore.isFri,
        }"
      >
        {{
          lotteryStore.isFri
            ? $t("lotteryMoney.cjdyj")
            : $t("lotteryMoney.xydyj")
        }}
      </div>
      <img
        v-if="!lotteryStore.isFri"
        class="jackpot-titleView-right"
        src="/image/lottery-v3/jackpot-title-icon.svg"
      />
      <img
        v-else
        class="jackpot-titleView-right"
        src="/image/lottery-v3/jackpot-titlefri-icon.svg"
      />
    </div>
    <!-- 当期奖池金额达到补贴上限 -->
    <div
      class="jackpot-alert"
      :class="{
        'jackpot-alert-fri': lotteryStore.isFri,
      }"
      v-if="isShowAlert"
    >
      {{
        $t("lotteryMoney.jcsxtx").replace("xxx", source.maxBdcIncrementAmount)
      }}
    </div>
    <!-- 奖池描述 -->
    <!-- <div
      v-if="
        lotteryStore.activityCurStatus != 3 &&
        lotteryStore.activityCurStatus != 5
      "
      class="jackpot-desc"
      :class="{
        'jackpot-desc-fri': lotteryStore.isFri,
      }"
    >
      {{ $t("lotteryMoney.xzwgszkj") }}
    </div> -->
    <!-- 活动第几期 -->
    <div
      class="jackpot-sessionId"
      :class="{
        'jackpot-sessionId-end':
          !lotteryStore.isFri &&
          (lotteryStore.activityCurStatus == 3 ||
            lotteryStore.activityCurStatus == 5),
        'jackpot-sessionId-fri': lotteryStore.isFri,
        'jackpot-sessionId-fri-end':
          lotteryStore.isFri &&
          (lotteryStore.activityCurStatus == 3 ||
            lotteryStore.activityCurStatus == 5),
      }"
    >
      {{ formatWithTimeZone(lotteryStore.$state.beginTime, "Asia/Jakarta") }}
    </div>
    <!-- 滚动数字-美金 -->
    <div
      class="jackpot-money items-center"
      :class="{
        'jackpot-money-fri': lotteryStore.isFri,
        'jackpot-money-fri-end':
          lotteryStore.isFri &&
          (lotteryStore.activityCurStatus == 3 ||
            lotteryStore.activityCurStatus == 5),
      }"
    >
      <div
        v-if="lotteryStore.activityCurStatus == 2"
        class="jackpot-money-value items-center"
        :class="{
          'jackpot-money-value-fri': lotteryStore.isFri,
        }"
      >
        <CountTo
          class="jackpot-money-value"
          :class="{
            'jackpot-money-value-fri': lotteryStore.isFri,
          }"
          :startVal="moneyStart"
          :endVal="moneyEnd"
          :decimals="2"
          :duration="1500"
          prefix="$"
        ></CountTo>
      </div>
      <div v-else class="items-center">
        <span
          class="jackpot-money-value"
          :class="{
            'jackpot-money-value-fri': lotteryStore.isFri,
          }"
          :data-text="`$${toThousands(moneyEnd)}`"
        >
          ${{ toThousands(moneyEnd) }}
        </span>
      </div>
      <!-- 美金兑换=>BDC -->
      <!-- new Decimal(source ? source.jackpotPoolAmount || 0 : 0).mul(1000) -->
      <div class="jackpot-money-moneyToBdc">
        =
        {{ toThousands(new Decimal(moneyEnd || 0).mul(1000)) }}
        BDC
      </div>
    </div>
    <!-- 下注记录滚动组件 -->
    <van-notice-bar
      v-if="lotteryStore.activityCurStatus == 2 && notices.length > 0"
      class="notice"
      :scrollable="false"
      background="transparent"
    >
      <van-swipe
        vertical
        class="notice-box"
        :autoplay="500"
        :duration="swipeDuration"
        :touchable="false"
        :show-indicators="false"
        :loop="false"
        @change="swipeChange"
      >
        <van-swipe-item
          v-for="(el, index) in notices"
          :key="`${el.idsid || el.id}`"
        >
          <div
            class="notice-item items-center"
            :class="{
              'notice-item-fri': lotteryStore.isFri,
            }"
          >
            <ImgNuxt
              class="notice-item-img items-center"
              :src="el.avatar || file.avatarDefault"
              :placeholder="file.avatarDefault"
              isHttp
            ></ImgNuxt>

            <div class="notice-item-info items-center">
              <div
                class="notice-item-info-nick notice-item-info-mr10"
                :class="{
                  'notice-item-info-nick-fri': lotteryStore.isFri,
                }"
              >
                {{ userNameToFormat(el.nickname) }}
              </div>
              <div class="notice-item-info-nums items-center">
                <div
                  class="notice-item-info-nums-item"
                  v-for="(num, index) in el.drawNo.split('')"
                  :key="index"
                >
                  <img
                    v-if="!lotteryStore.isFri"
                    class="notice-item-info-nums-item-bg"
                    src="/image/lottery-v3/num-zj-bg1.svg"
                  />
                  <img
                    v-else
                    class="notice-item-info-nums-item-bg"
                    src="/image/lottery-v3/num-zjfri-bg1.svg"
                  />
                  <div class="notice-item-info-nums-item-text">{{ num }}</div>
                </div>
              </div>
              <div
                class="notice-item-info-bet notice-item-info-mr10"
                :class="{
                  'notice-item-info-bet-fri': lotteryStore.isFri,
                }"
              >
                *{{ el.drawCount }}
              </div>

              <div
                class="notice-item-info-bet"
                :class="{
                  'notice-item-info-bet-fri': lotteryStore.isFri,
                }"
              >
                {{ $t("lotteryMoney.xzcg") }}
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div
      v-if="
        lotteryStore.activityCurStatus < 2 ||
        (lotteryStore.activityCurStatus == 2 && notices.length == 0)
      "
      class="notice notice-not items-center"
    >
      <div
        class="notice-item items-center"
        :class="{
          'notice-item-fri': lotteryStore.isFri,
        }"
      >
        <ImgNuxt
          class="notice-item-img items-center"
          :src="file.avatarDefault"
          :placeholder="file.avatarDefault"
          isHttp
        ></ImgNuxt>

        <div class="notice-item-info items-center">
          <div
            class="notice-item-info-nick"
            :class="{
              'notice-item-info-nick-fri': lotteryStore.isFri,
            }"
          >
            **
          </div>
          <div class="notice-item-info-nums items-center">
            <div
              class="notice-item-info-nums-item"
              v-for="(num, index) in ['*', '*', '*', '*', '*']"
              :key="index"
            >
              <img
                v-if="!lotteryStore.isFri"
                class="notice-item-info-nums-item-bg"
                src="/image/lottery-v3/num-zj-bg1.svg"
              />
              <img
                v-else
                class="notice-item-info-nums-item-bg"
                src="/image/lottery-v3/num-zjfri-bg1.svg"
              />
              <div class="notice-item-info-nums-item-text">{{ num }}</div>
            </div>
          </div>
          <div
            class="notice-item-info-bet"
            :class="{
              'notice-item-info-bet-fri': lotteryStore.isFri,
            }"
          >
            * {{ $t("lotteryMoney.xxz") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="jackpot">
import Decimal from "decimal.js";
import { toThousands, decimalToLength, getOssFileUrl, debounce } from "@/utils";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";

// 奖池金额
const CountTo = defineAsyncComponent(() => import("../countTo/index.vue"));

const props = defineProps({
  source: Object,
  moneyEnd: Number,
  moneyStart: Number,
});

const emit = defineEmits(["blockGesture"]);

// 资源地址
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const lotteryStore = useLotteryV3Store();

// 奖池上限展示
const isShowAlert = computed(() => {
  // return true;
  if (props.source) {
    return props.source.isReachMax == 1; // 1 显示  其他不显示
  }
  return false;
});

/************************ start 下注记录 start ************************/
const notices = ref([]); // 号码轮播数组
const noticesIdx = ref(0); // 当前索引
const swipeDuration = 500;

/**
 * @description: 向数据源中添加数据
 * @param {*} newArr 新数组
 */
// const upDateNotices = throttle(
//   (newArr) => {
//     if (newArr && newArr.length > 0) {
//       setTimeout(() => {
//         // 2.1 获取当前展示的这一条,保存;并赋值给数组
//         const endEl = notices.value.pop();
//         if (endEl) {
//           notices.value = [endEl];
//           // 2.2 获取下一页 20 条,加上上面的一条; nextick 进行赋值
//           nextTick(() => {
//             notices.value = [endEl].concat(newArr);
//           });
//         }
//         // 第一次没有数据,消息推送的下注记录,场景
//         else {
//           notices.value = newArr;
//         }
//       }, swipeDuration - 10); // 100
//     }
//   },
//   500,
//   true
// );
// 滚动索引变化事件
const swipeChange = (val) => {
  // console.log(val, "val", notices.value[val].drawNo);
  // // 1. 保存索引
  // noticesIdx.value = val;
  // // 2. 当滚动到最后一条数据的时候;获取最新的数据
  // if (val + 1 == notices.value.length) {
  //   const newArr = lotteryStore.$state.betRecordList.splice(0, 3);
  //   upDateNotices(newArr);
  // }
};

// const betRecordList_watch = watch(
//   () => lotteryStore.$state.betRecordList,
//   (newVal, oldVal) => {
//     if (newVal.length > 0 && oldVal.length == 0) {
//       const newArr = lotteryStore.$state.betRecordList.splice(0, 3);
//       upDateNotices(newArr);
//     }
//   }
// );
let notices_time = null;
onMounted(() => {
  // 1. 初始化数据
  notices.value = lotteryStore.$state.betRecordList.splice(0, 5);
  // 2. 间隔 0.7 秒 获取一次数据
  notices_time = setInterval(() => {
    if (
      lotteryStore.$state.betRecordList &&
      lotteryStore.$state.betRecordList.length > 0
    ) {
      const el = lotteryStore.$state.betRecordList.shift();
      // 2.1 数据是否超过 50 条
      if (notices.value && notices.value.length > 50) {
        notices.value = [el];
      }
      // 2.2 添加数据
      else {
        notices.value.push(el);
      }
    }
  }, 500);
});

onBeforeUnmount(() => {
  // betRecordList_watch && betRecordList_watch();
  notices_time && clearInterval(notices_time);
});

// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  let time = date || Date.now();
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric", // 2-digit
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "2-digit",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "2-digit",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(time)));
  const month = monthFormatter.format(new Date(Number(time)));
  const day = dayFormatter.format(new Date(Number(time)));

  return `${year}${month}${day}`;
};
</script>
<style lang="scss" scoped>
.jackpot {
  position: relative;
  height: 209 * 2px;
  width: 100vw;
  margin-bottom: 17 * 2px;
  &-end {
    margin-top: 15 * 2px;
    height: auto !important;
    // height: 147 * 2px;
  }

  &-main {
    width: 100%;
    object-fit: cover;
    &-fri {
      // margin-top: 0 * 2px;
      &-end {
        margin-top: 3 * 2px;
      }
    }
  }

  &-titleView {
    position: absolute;
    top: -17 * 2px;
    left: 50%;
    transform: translateX(-50%);

    &-text {
      padding: 0 * 2px 4 * 2px;
      height: 18 * 2px;
      line-height: 18 * 2px;
      background: #007bff;
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 400;
      white-space: nowrap;
      &-fri {
        background: #f8861a;
      }
    }
    &-fri {
      top: -15 * 2px;
      &-end {
        top: -18 * 2px;
      }
    }

    &-left {
      position: relative;
      right: -1px;
      width: 16 * 2px;
      height: 18 * 2px;
    }
    &-right {
      position: relative;
      bottom: 0px;
      left: -1px;
      width: 16 * 2px;
      height: 17.5 * 2px;
      transform: rotateY(180deg);
      overflow: hidden;
    }
  }

  &-money {
    position: absolute;
    top: 12 * 2px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    flex-direction: column;
    &-moneyToBdc {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12 * 2px;
      font-weight: 400;
    }
    &-value {
      position: relative;
      color: #fffece;
      font-size: 24 * 2px;
      font-weight: 860;
      margin-bottom: 4 * 2px;
      &-fri {
        color: #fff;
      }
    }
    &-value::before,
    &-value::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      color: rgba(0, 0, 0, 0.25);
    }

    &-value::before {
      transform: translate(0px, 3px);
    }

    &-value::after {
      transform: translate(0px, 3px);
    }
    &-fri {
      top: 10 * 2px;
      &-end {
        top: 13.5 * 2px;
      }
    }
  }

  &-alert {
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 11 * 2px;
    font-weight: 400;

    padding: 2 * 2px 10 * 2px;
    min-width: 300 * 2px;
    max-width: 100%;
    text-align: center;
    word-break: break-word;

    background: linear-gradient(
      90deg,
      rgba(0, 123, 255, 0) 0%,
      rgba(0, 123, 255, 0.8) 9.61%,
      #007bff 49.82%,
      rgba(0, 123, 255, 0.8) 89.82%,
      rgba(0, 123, 255, 0) 100%
    );
    backdrop-filter: blur(15px);
    &-fri {
      background: linear-gradient(
        90deg,
        rgba(248, 114, 3, 0) 0%,
        rgba(248, 114, 3, 0.8) 9.61%,
        #f87203 49.82%,
        rgba(248, 114, 3, 0.8) 89.82%,
        rgba(248, 114, 3, 0) 100%
      );
    }
  }

  &-desc {
    position: absolute;
    top: 140 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #0065d1;
    font-size: 12 * 2px;
    font-weight: 400;

    padding: 2 * 2px 8 * 2px;
    min-width: 300 * 2px;
    max-width: 100%;
    text-align: center;
    word-break: break-word;

    background: linear-gradient(
      90deg,
      rgba(0, 123, 255, 0) 0.07%,
      rgba(0, 123, 255, 0.36) 50.46%,
      rgba(0, 123, 255, 0) 99.93%
    );
    backdrop-filter: blur(15px);

    &-fri {
      // bottom: 50 * 2px;
      background: linear-gradient(
        90deg,
        rgba(255, 155, 1, 0) 0.07%,
        rgba(255, 155, 1, 0.6) 50.46%,
        rgba(255, 155, 1, 0) 99.93%
      );
      color: #b06f2a;
    }
  }
  &-sessionId {
    position: absolute;
    top: 114 * 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2 * 2px 8 * 2px;
    border-radius: 100px;

    color: #0065d1;
    font-size: 12 * 2px;
    font-weight: 590;

    border: 0.4px solid #fff;
    background: #66c9ff;
    &-end {
      top: 84 * 2px;
    }

    &-fri {
      background: #ffb800;
      color: #b06f2a;
      &-end {
        top: 88 * 2px !important;
      }
    }
  }
}
.notice {
  position: absolute;
  bottom: 0;
  z-index: 9;
  width: 100vw;
  padding: 0 !important;

  :deep(.van-notice-bar__wrap) {
    justify-content: center;
  }

  &-not {
    bottom: 15px;
    justify-content: center;
  }

  &-box {
    width: 100%;
    height: 25 * 2px;
  }

  &-item {
    padding: 0 10 * 2px;
    justify-content: center;
    background: linear-gradient(
      90deg,
      rgba(0, 124, 255, 0) 0%,
      rgba(0, 123, 255, 0.4) 50.28%,
      rgba(0, 124, 255, 0) 100%
    );
    &-fri {
      background: linear-gradient(
        90deg,
        rgba(241, 146, 0, 0) 0%,
        rgba(241, 146, 0, 0.6) 50.28%,
        rgba(241, 146, 0, 0) 100%
      );
    }
    &-img {
      justify-content: center;
      width: 18 * 2px;
      height: 18 * 2px;
      border-radius: 100px;
      overflow: hidden;
      margin-right: 4 * 2px;
    }
    &-info {
      flex: 1;
      &-nick {
        color: #0055b0;
        font-size: 12 * 2px;
        font-weight: 400;
        &-fri {
          color: #b06f2a;
        }
      }

      &-nums {
        justify-content: center;

        &-item {
          position: relative;
          width: 16 * 2px;
          height: 16 * 2px;
          margin-right: 2 * 2px;
          &-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          &-text {
            position: relative;
            z-index: 9;
            line-height: 16 * 2px;
            text-align: center;
            color: #fff;
            font-size: 12 * 2px;
            font-weight: 590;
          }
        }
      }
      &-mr10 {
        margin-right: 10 * 2px;
      }
      &-bet {
        color: #0055b0;
        font-size: 12 * 2px;
        font-weight: 400;

        &-fri {
          color: #b06f2a;
        }
      }
    }
  }
}
</style>
